<template>
  <div class="index padding-b160">
    <!-- <div class="header_bg"></div> -->
    <div class="header flex justify-between align-center">
      <img class="logo" src="@/assets/img/logo.png" alt />
      <div class="header_search flex align-center" @click="$router.push({name: 'search-search'})">
        <i class="iconfont icon-sousuo"></i>
        <input class="flex-grow" disabled type="text" value placeholder="搜索" />
      </div>
      <div style="color:red;font-size: 13px" @click="gosign">
        <span style="white-space: nowrap;">入驻链配</span>
      </div>
    </div>
    <!-- ps: v-for循环数据 thumb图片路径 title标题 url跳转链接地址 [0]第几个数据,从0开始算 slice()控制循环的数量 -->
    <!-- 首页轮播 ad1 -->
    <div class="swiper bg-ff" v-if="ad1.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad1" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 选项轮播 ad2 -->
    <div class="tabSwiper bg-ff" v-if="ad2.length > 0">
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item
          v-for="(item,index) in ad2size"
          :key="index"
          class="tab_ul flex flex-wrap text-center rem-24px text-content"
        >
          <div
            class="tab_li"
            v-for="(items,indexs) in ad2.slice(index*10,(index*10)+10)"
            :key="indexs"
            @click="http(items.url)"
          >
            <img :key="items.thumb" v-lazy="items.thumb" alt />
            <div class="word-all">{{items.title}}</div>
          </div>
          <div
            class="tab_li"
            v-show="(10 - ad2.slice(index*10,(index*10)+10).length) > 0"
            v-for="(itemss,indexss) in (10 - ad2.slice(index*10,(index*10)+10).length)"
            :key="indexss"
          ></div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="colSwiper">
      <div>
        <img src="@/assets/img/a4.png" alt />
      </div>
      <van-swipe autoplay="2000" loop :show-indicators="false" style="height: 40px;" vertical>
        <van-swipe-item class="text-cut-one" v-for="(item,index) in colswiper" :key="index">
          {{item.user_phone}} {{item.user_name}}提交了
          <span style="color: red;">{{item.shorter_name}}</span>申请
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 品牌1 ad3 -->
    <div class="brandFrist" v-if="ad3.length > 0">
      <div class="swiper bg-ff" v-if="ad3_top.length > 0">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in ad3_top" :key="index" @click="http(item.url)">
            <img :key="item.thumb" v-lazy="item.thumb" alt />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div
        class="hot_title padding-lr20 text-center flex justify-center align-center"
        style="border-top: 10px solid #f5f5f5;"
      >
        <img src="@/assets/img/zhu.png" alt />
        <span style="margin: 0 6px;">热门推荐</span>
        <img src="@/assets/img/you.png" alt />
      </div>

      <div class="brandFrist_imgList bg-ff flex text-center">
        <div v-for="(item,index) in ad3" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
          <div class="text-cut-one">{{item.title}}</div>
        </div>
      </div>
    </div>

    <!-- 热门推荐 ad4 -->
    <div class="hot" v-if="ad4.length > 0">
      <div class="hot_title padding-lr20">
        <span class="c-ff0" v-html="ad4_title">{{ad4_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">HOT</span>

        <a href="#">更多</a>
      </div>
      <div class="hot_ul text-center flex flex-wrap bg-ff padding-lr20" v-if="ad4">
        <div
          class="hot_li"
          :style="{'border-bottom': (index+1) > (parseInt((index+1)/4) * 4) ? '1px solid #f4f4f4': 'none'}"
          v-for="(item,index) in ad4"
          :key="index"
          @click="http(item.url)"
        >
          <div class="hot_li_img">
            <img :key="item.thumb" v-lazy="item.thumb" alt />
          </div>
          <div class="text-cut-one">{{item.title}}</div>
        </div>
      </div>
    </div>

    <!-- 发动机上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad38.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad38" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 发动机 ad46 ad47 ad7 -->
    <div class="engine" v-if="(ad46.length + ad47.length + ad7.length) > 0 ">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad7_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Engine</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad46"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad47[0]"
              :key="ad47[0].thumb"
              v-lazy="ad47[0].thumb"
              alt
              @click="http(ad47[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad47[1]"
              :key="ad47[1].thumb"
              v-lazy="ad47[1].thumb"
              alt
              @click="http(ad47[1].url)"
            />
            <img
              class="h-120"
              v-if="ad47[2]"
              :key="ad47[2].thumb"
              v-lazy="ad47[2].thumb"
              alt
              @click="http(ad47[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad7"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 底盘件上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad39.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad39" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 底盘件 ad48 ad49 ad8 -->
    <div class="engine" v-if="(ad48.length + ad49.length + ad8.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad8_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Chassis</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad48"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad49[0]"
              :key="ad49[0].thumb"
              v-lazy="ad49[0].thumb"
              alt
              @click="http(ad49[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad49[1]"
              :key="ad49[1].thumb"
              v-lazy="ad49[1].thumb"
              alt
              @click="http(ad49[1].url)"
            />
            <img
              class="h-120"
              v-if="ad49[2]"
              :key="ad49[2].thumb"
              v-lazy="ad49[2].thumb"
              alt
              @click="http(ad49[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad8"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 润滑养护上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad40.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad40" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 润滑养护 ad50 ad51 ad9 -->
    <div class="engine" v-if="(ad50.length + ad51.length + ad9.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad9_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Lubrication maintenance</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad50"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad51[0]"
              :key="ad51[0].thumb"
              v-lazy="ad51[0].thumb"
              alt
              @click="http(ad51[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad51[1]"
              :key="ad51[1].thumb"
              v-lazy="ad51[1].thumb"
              alt
              @click="http(ad51[1].url)"
            />
            <img
              class="h-120"
              v-if="ad51[2]"
              :key="ad51[2].thumb"
              v-lazy="ad51[2].thumb"
              alt
              @click="http(ad51[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad9"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 车身附件上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad41.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad41" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 车身附件 ad52 ad53 ad33 -->
    <div class="engine" v-if="(ad52.length + ad53.length + ad33.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad33_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Body accessories</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad52"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad53[0]"
              :key="ad53[0].thumb"
              v-lazy="ad53[0].thumb"
              alt
              @click="http(ad53[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad53[1]"
              :key="ad53[1].thumb"
              v-lazy="ad53[1].thumb"
              alt
              @click="http(ad53[1].url)"
            />
            <img
              class="h-120"
              v-if="ad53[2]"
              :key="ad53[2].thumb"
              v-lazy="ad53[2].thumb"
              alt
              @click="http(ad53[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad33"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 电子电器上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad42.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad42" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 电子电器 ad54 ad55 ad31 -->
    <div class="engine" v-if="(ad54.length + ad55.length + ad31.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad31_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Electronic appliances</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad54"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad55[0]"
              :key="ad55[0].thumb"
              v-lazy="ad55[0].thumb"
              alt
              @click="http(ad55[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad55[1]"
              :key="ad55[1].thumb"
              v-lazy="ad55[1].thumb"
              alt
              @click="http(ad55[1].url)"
            />
            <img
              class="h-120"
              v-if="ad55[2]"
              :key="ad55[2].thumb"
              v-lazy="ad55[2].thumb"
              alt
              @click="http(ad55[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad31"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 电子电器上通栏 -->
    <div class="swiper bg-ff margin-t20" v-if="ad43.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in ad43" :key="index" @click="http(item.url)">
          <img :key="item.thumb" v-lazy="item.thumb" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 供应类电商 ad56 ad57 ad34 -->
    <div class="engine" v-if="(ad56.length + ad57.length + ad34.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad34_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Supply chain</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad56"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad57[0]"
              :key="ad57[0].thumb"
              v-lazy="ad57[0].thumb"
              alt
              @click="http(ad57[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad57[1]"
              :key="ad57[1].thumb"
              v-lazy="ad57[1].thumb"
              alt
              @click="http(ad57[1].url)"
            />
            <img
              class="h-120"
              v-if="ad57[2]"
              :key="ad57[2].thumb"
              v-lazy="ad57[2].thumb"
              alt
              @click="http(ad57[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad34"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 数据软件 ad58 ad59 ad35 -->
    <div class="engine" v-if="(ad58.length + ad59.length + ad35.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad35_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Data software</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad58"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad59[0]"
              :key="ad59[0].thumb"
              v-lazy="ad59[0].thumb"
              alt
              @click="http(ad59[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad59[1]"
              :key="ad59[1].thumb"
              v-lazy="ad59[1].thumb"
              alt
              @click="http(ad59[1].url)"
            />
            <img
              class="h-120"
              v-if="ad59[2]"
              :key="ad59[2].thumb"
              v-lazy="ad59[2].thumb"
              alt
              @click="http(ad59[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad35"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 经销商 ad60 ad61 ad37 -->
    <div class="chassis padding-t20" v-if="(ad60.length + ad61.length + ad37.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad37_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">DEALER</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad60"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad61[0]"
              :key="ad61[0].thumb"
              v-lazy="ad61[0].thumb"
              alt
              @click="http(ad61[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad61[1]"
              :key="ad61[1].thumb"
              v-lazy="ad61[1].thumb"
              alt
              @click="http(ad61[1].url)"
            />
            <img
              class="h-120"
              v-if="ad61[2]"
              :key="ad61[2].thumb"
              v-lazy="ad61[2].thumb"
              alt
              @click="http(ad61[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad37"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- oe专栏 ad62 ad63 ad44 -->
    <div class="engine" v-if="(ad62.length + ad63.length + ad44.length) > 0">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">{{ad44_title}}</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">Original parts</span>

        <a href="#">更多</a>
      </div>
      <div class="engine_super bg-ff">
        <!-- 大图 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-b20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad62"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
        <!-- 左大 右两小 -->
        <div class="flex engine_one">
          <div class="w-50p padding-r10">
            <img
              class="w-100p mh-100p"
              v-if="ad63[0]"
              :key="ad63[0].thumb"
              v-lazy="ad63[0].thumb"
              alt
              @click="http(ad63[0].url)"
            />
          </div>
          <div class="flex padding-l10 flex-column justify-between w-50p">
            <img
              class="h-120"
              v-if="ad63[1]"
              :key="ad63[1].thumb"
              v-lazy="ad63[1].thumb"
              alt
              @click="http(ad63[1].url)"
            />
            <img
              class="h-120"
              v-if="ad63[2]"
              :key="ad63[2].thumb"
              v-lazy="ad63[2].thumb"
              alt
              @click="http(ad63[2].url)"
            />
          </div>
        </div>
        <!-- 小 -->
        <div class="flex engine_two flex-wrap">
          <div
            :class="['w-50p margin-t20', (indexs+1)%2 ? 'padding-r10' : 'padding-l10']"
            v-for="(items,indexs) in ad44"
            :key="indexs"
          >
            <img
              class="w-100p"
              v-if="items"
              :key="items.thumb"
              v-lazy="items.thumb"
              alt
              @click="http(items.url)"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 最新资讯 -->
    <div class="bg-ff padding-lr20 marign-t20">
      <tab :tabList="tabList" :tabIndex="tabIndex" @tabChange="getList"></tab>
      <div class="bg-ff news_ul" v-if="tabIndex==1">
        <div
          class="flex news_li w-100p"
          v-for="(item, index) in list"
          :key="index"
          @click="to('recruit-news',item.article_id)"
        >
          <img class="margin-r24" :src="item.thumb?item.thumb:$nodata" alt />
          <div class="flex-grow overflow-hidden">
            <div class="rem-32px text-cut-two text-content">{{item.article_title}}</div>
            <div class="flex justify-between news_li_s">
              <div
                class="rem-20px c-66 news_li_tip flex-two text-cut-one margin-r20"
              >{{item.enterprise_title}}</div>
              <div class="rem-20px c-66 flex-one text-cut-one">{{item.created_at.slice(0,10)}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新申请 -->
      <div v-if="tabIndex==0">
        <div
          class="record_li flex padding-tb20"
          v-for="(item,index) in list"
          :key="index"
          @click="to('card',item.id)"
        >
          <img class="radius-50p margin-r24" :src="item.logo?item.logo:$nologin" alt />
          <div class="flex-grow flex flex-column text-content">
            <div class="rem-30px overflow-hidden">
              <span class="fl">{{item.user_phone}} {{item.user_name}}</span>
              <span>提交了代理申请</span>
            </div>
            <div class="rem-24px overflow-hidden">
              <span class="fl c-99">{{item.shorter_name}}</span>
              <span class="fr c-99">{{item.created_at}}</span>
            </div>
          </div>
        </div>
      </div>

      <load @loadData="getData" :list="list" :total="total"></load>
    </div>

    <!-- 底部导航 -->
    <footerNav :active="0"></footerNav>
  </div>
</template>

<script>
import axios from "axios";
import footerNav from "../components/footer";
import tab from "../components/tab";
import load from "../components/load";
const jsApiList = ["onMenuShareAppMessage", "onMenuShareTimeline"];
let wx = {};
if (process.client) {
  wx = require("weixin-js-sdk");
}
export default {
  async asyncData({ params, error }) {
    let [
      req_ad1,
      req_ad2,
      req_ad3,
      req_ad4,
      req_ad5,
      req_ad6,
      req_ad7,
      req_ad8,
      req_ad9,
      req_ad10,
      req_ad11,
      req_ad12,
      indexs
    ] = await Promise.all([
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 1,
        limit: 5,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 2,
        limit: 11,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 3,
        limit: 1,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 4,
        limit: 3,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 5,
        limit: 9,
        is_recommend: 1
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 7,
        limit: 0,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 31,
        limit: 4,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 8,
        limit: 0,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 9,
        limit: 0,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 33,
        limit: 6,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 34,
        limit: 8,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/ad/getAd", {
        category_id: 35,
        limit: 4,
        is_recommend: 0
      }),
      axios.post("http://glc.ilianpei.com/wap/index/index", {
        type: 1,
        page: 1
      })
    ]);
    return {
      data1: req_ad1.data,
      data2: req_ad2.data,
      data3: req_ad3.data,
      data4: req_ad4.data,
      data5: req_ad5.data,
      data6: req_ad6.data,
      data7: req_ad7.data,
      data8: req_ad8.data,
      data9: req_ad9.data,
      data10: req_ad10.data,
      data11: req_ad11.data,
      data12: req_ad12.data,
      index: indexs.data
    };
  },
  components: {
    footerNav,
    tab,
    load
  },
  data() {
    return {
      tabList: ["最新申请", "最新资讯"],
      tabIndex: 0,
      list: [],
      total: 0,
      ad2size: 0,
      seo_title: "",
      seo_describe: "",
      colswiper: "",
      // ps: 从上至下 一个数组代表一整块广告位区域
      ad1: [],
      ad2: [],
      ad3: [],
      ad3_top: [],
      ad4: [],
      ad4_title: "",

      // 发动机
      ad47: [],
      ad46: [],
      ad7: [],
      ad7_title: "",
      // 底盘件
      ad48: [],
      ad49: [],
      ad8: [],
      ad8_title: "",
      ad50: [],
      ad51: [],
      ad9: [],
      ad9_title: "",
      ad52: [],
      ad53: [],
      ad33: [],
      ad33_title: "",
      ad54: [],
      ad55: [],
      ad31: [],
      ad31_title: "",
      ad56: [],
      ad57: [],
      ad34: [],
      ad34_title: "",
      ad58: [],
      ad59: [],
      ad35: [],
      ad35_title: "",
      ad60: [],
      ad61: [],
      ad37: [],
      ad37_title: "",
      ad62: [],
      ad63: [],
      ad44: [],
      ad44_title: "",
      // 通栏
      ad38: [],
      ad39: [],
      ad40: [],
      ad41: [],
      ad42: [],
      ad43: []
    };
  },
  mounted() {
    // ps: 传递四个参数  分类id， 数量， 1推荐0不推荐， data中的变量名称 name标题
    this.getAd(1, 5, 0, this.ad1);
    this.getAd(2, 0, 0, this.ad2);
    this.getAd(3, 0, 0, this.ad3_top);
    this.getAd(4, 16, 0, this.ad3);

    this.getAd(5, 8, 1, this.ad4, "ad4_title"); // 热门推荐

    this.getAd(46, 0, 0, this.ad46); // 发动机
    this.getAd(47, 0, 0, this.ad47); // 发动机
    this.getAd(7, 0, 0, this.ad7, "ad7_title"); // 发动机

    this.getAd(48, 0, 0, this.ad48); // 底盘件
    this.getAd(49, 0, 0, this.ad49); // 底盘件
    this.getAd(8, 0, 0, this.ad8, "ad8_title"); // 底盘件

    this.getAd(50, 0, 0, this.ad50); // 润滑养护
    this.getAd(51, 0, 0, this.ad51); // 润滑养护
    this.getAd(9, 0, 0, this.ad9, "ad9_title"); // 润滑养护

    this.getAd(52, 0, 0, this.ad52); // 车身附件
    this.getAd(53, 0, 0, this.ad53); // 车身附件
    this.getAd(33, 0, 0, this.ad33, "ad33_title"); // 车身附件

    this.getAd(54, 0, 0, this.ad54); // 电子电器
    this.getAd(55, 0, 0, this.ad55); // 电子电器
    this.getAd(31, 0, 0, this.ad31, "ad31_title"); // 电子电器

    this.getAd(56, 0, 0, this.ad56); // 供应类电商
    this.getAd(57, 0, 0, this.ad57); // 供应类电商
    this.getAd(34, 0, 0, this.ad34, "ad34_title"); // 供应类电商

    this.getAd(58, 0, 0, this.ad58); // 数据软件
    this.getAd(59, 0, 0, this.ad59); // 数据软件
    this.getAd(35, 0, 0, this.ad35, "ad35_title"); // 数据软件

    this.getAd(60, 0, 0, this.ad60); // 经销商
    this.getAd(61, 0, 0, this.ad61); // 经销商
    this.getAd(37, 0, 0, this.ad37, "ad37_title"); // 经销商

    this.getAd(62, 0, 0, this.ad62); // oe专栏
    this.getAd(63, 0, 0, this.ad63); // oe专栏
    this.getAd(44, 0, 0, this.ad44, "ad44_title"); // oe专栏

    this.getAd(38, 0, 0, this.ad38); // 发动机通栏
    this.getAd(39, 0, 0, this.ad39); // 底盘件上通栏
    this.getAd(40, 0, 0, this.ad40); // 润滑养护上通栏
    this.getAd(41, 0, 0, this.ad41); // 车身附件上通栏
    this.getAd(42, 0, 0, this.ad42); // 电子电器上通栏
    this.getAd(43, 0, 0, this.ad43); // 供应类电商上通栏
    this.getData(1);

    // 首屏列表
    this.$axios
      .post("/home/getConfig", {
        token: window.localStorage.getItem("token")
      })
      .then(res => {
        this.seo_describe = res.data.data.seo_describe;
        this.seo_title = res.data.data.seo_title;
        this.getUrl();
      });
    // seo
  },
  methods: {
    // 广告位
    //ps:  id 分类   li 数量   rd 是否推荐 name变量 标题 title
    getAd(id, li, rd, name, title) {
      this.$axios
        .post("/wap/ad/getAd", {
          category_id: id,
          limit: li,
          is_recommend: rd
        })
        .then(res => {
          this[title] = res.data.category_name;
          for (let i in res.data.data) {
            name.push(res.data.data[i]);
          }
          // 第二块分类轮播图的页数
          this.ad2size = Math.ceil(this.ad2.length / 10);
        });
    },
    // -----------------------------------------
    // 微信分享
    getUrl() {
      let that = this;
      let url = window.location.href;
      this.$axios
        .post("/common/util/sign", {
          url: url
        })
        .then(res => {
          let timestamp = res.data.data.timestamp;
          let nonceStr = res.data.data.noncestr;
          let signature = res.data.data.sign;

          wx.config({
            debug: false,
            appId: "wxc776bb6f53038a01",
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: jsApiList
          });

          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: that.seo_title, // 分享标题
              link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "http://img.ilianpei.com/2020-08-06/15967000075f2bb5671077f.png", // 分享图标
              success() {
                // alert("分享朋友圈成功");
                // 用户确认分享后执行的回调函数
              },
              cancel() {
                // 用户取消分享后执行的回调函数
              }
            });
            wx.onMenuShareAppMessage({
              title: that.seo_title, // 分享标题
              desc: that.seo_describe, // 分享描述
              link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                "http://img.ilianpei.com/2020-08-06/15967000075f2bb5671077f.png", // 分享图标
              success: function() {
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          });
        });
    },
    // tab切换
    getList(e) {
      this.tabIndex = e;
      this.list = [];
      this.getData(1);
    },
    // 懒加载 传页数
    getData(page) {
      this.$axios
        .post("/wap/index/index", {
          type: this.tabIndex + 1,
          page: page
        })
        .then(res => {
          if (page == 1) {
            this.list = [];
            this.topList = [];
          }
          if (res.data.data.length == 0) {
            this.total++;
            return false;
          }
          if (!this.colswiper) {
            this.colswiper = res.data.data;
          }
          for (let i in res.data.data) {
            this.list.push(res.data.data[i]);
          }
        });
    },
    // 广告位
    //ps:  id 分类   li 数量   rd 是否推荐 name变量 标题 title
    // getAd(name, title, that) {
    //   this[title] = that.category_name;
    //   for (let i in that.data) {
    //     name.push(that.data[i]);
    //   }
    //   this.ad2size = Math.ceil(this.ad2.length / 10);
    // },
    // 跳转页面
    go(path) {
      this.$router.push({
        name: path
      });
    },
    gosign() {
      if (localStorage.getItem("qx_token")) {
        this.$router.push({
          name: "mine"
        });
      } else if (localStorage.getItem("token")) {
        this.$axios
          .post("/wap/login/quitLogin", {
            token: window.localStorage.getItem("token")
          })
          .then(res => {
            if (res.data.code == 0) {
              window.localStorage.removeItem("phone");
              window.localStorage.removeItem("token");
              window.localStorage.removeItem("qx_token");
              window.localStorage.removeItem("qx_id");
              window.localStorage.removeItem("vid");
              this.$toast(res.data.msg);
              this.$router.push({
                name: "recruit-login"
              });
            }
          });
      } else {
        this.$router.push({
          name: "recruit-sign",
          query: {
            type: 1
          }
        });
      }
    },
    // 携带参数跳转
    to(path, id) {
      if (id) {
        this.$router.push({
          name: path,
          query: {
            id: id
          }
        });
        return false;
      }
      this.$router.push({
        name: path
      });
    },
    // 跳转内链
    http(path) {
      window.location.href = path;
    }
  }
};
</script>




<style>
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .padding-b160 {
    padding-bottom: 2rem;
    box-sizing: content-box;
  }
}
/* 申请记录 */
.index .record_li img {
  width: 0.94rem;
  height: 0.94rem;
}
/*  */
.index .swiper .van-swipe__indicator,
.index .tabSwiper .van-swipe__indicator {
  width: 0.44rem;
  border-radius: 0;
  height: 0.04rem;
  background-color: #ebebeb;
  opacity: 1;
}

.index .swiper .van-swipe__indicator--active,
.index .tabSwiper .van-swipe__indicator--active {
  background-color: #ff0000 !important;
}

.index .tabSwiper .van-swipe__indicators {
  bottom: 0.1rem;
}

.index .tab_li {
  /* width: 0.8rem;
  margin-right: 0.65rem; */
  width: 12%;
  margin-right: 10%;
  padding-bottom: 0.25rem;
  color: #666;
}

.tab_li > img {
  /* border-radius: 50%; */
  margin: 0 auto;
}

.index .tab_li:nth-of-type(5n) {
  margin-right: 0;
}

.index .tab_li img {
  width: 0.8rem;
  height: 0.8rem;
}
</style>
<style scoped>
.hot_title a {
  float: right;
  font-size: 0.24rem;
}
/* 头部 */

.header_bg {
  height: 0.82rem;
  position: relative;
  top: 0;
  left: 0;
  background: white;
  z-index: 98;
}

.header {
  padding: 0.14rem 0.2rem;
  background: #fff;
  /* position: fixed; */
  top: 0.92rem;
  left: 0;
  width: 100%;
  z-index: 99;
}

.logo {
  width: 1.7rem;
  object-fit: contain;
}

.icon-sousuo {
  font-size: 0.3rem;
}

.header_search {
  height: 0.64rem;
  background: #ededed;
  color: #8a8a8a;
  padding: 0 0.2rem;
  border-radius: 0.1rem;
  flex-grow: 1;
  margin: 0 0.1rem;
}

.header_search input {
  background: #ededed;
  font-size: 0.26rem;
  margin-left: 0.1rem;
}

/* 轮播 */

.swiper {
  padding: 0.22rem 0.2rem;
}

.swiper img {
  width: 100%;
}

/* 选项卡轮播 */

.tabSwiper {
  padding: 0 0.2rem;
}

.tabSwiper .van-swipe-item {
  padding: 0 0.2rem;
}

/* 品牌1 */

.brandFrist {
  padding-top: 0.2rem;
  background: #f8f8f8;
}

.brandFrist_img {
  padding: 0.2rem 0.2rem;
}

.brandFrist_img img {
  width: 100%;
}

.brandFrist_imgList {
  font-size: 0.24rem;
  padding: 0 0.2rem 0.2rem;
  line-height: 1.6;
  color: #666;
  flex-wrap: wrap;
  padding-top: 10px;
}

.brandFrist_imgList > div {
  width: 22%;
  margin-top: 2%;
  margin-right: 4%;
}

.brandFrist_imgList > div:nth-of-type(4n) {
  margin-right: 0;
}

.brandFrist_imgList img {
  width: 100%;
  margin-bottom: 0.1rem;
}

/* 热门推荐 */

.hot_title {
  background: white;
  font-size: 0.32rem;
  height: 1rem;
  line-height: 1rem;
}

.hot_li {
  width: 25%;
  padding: 0 0.26rem 0.35rem;
  font-size: 0.24rem;
  line-height: 1.6;
  color: #666;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

/* .hot .hot_li:nth-of-type(n + 5) {
  border-bottom: none;
} */

.hot_li:nth-of-type(4n) {
  border-right: 0;
}

.hot_li_img {
  height: 0.86rem;
}

.hot_li img {
  max-width: 1rem;
  max-height: 0.74rem;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 发动机 */

.engine {
  padding-top: 0.2rem;
}

.engine_super {
  padding: 0 0.2rem 0.2rem;
}

.engine .w-50p {
  width: 50%;
}

.engine .h-50p {
  height: 50%;
}

.engine .h-120 {
  /* max-height: 1.2rem; */
  width: 100%;
}

.engine .w-160 {
  width: 1.6rem;
}

.engine_one {
  /* height: 2.6rem; */
  /* margin-bottom: 0.2rem; */
}

.engine_two {
  height: auto;
  /* margin-top: 0.2rem; */
}

.engine_three {
  height: auto;
}

/* 底盘 */

.chassis_cont > img {
  width: 100%;
  /* height: 2.6rem; ps*/
  height: auto;
  /* margin-bottom: 0.2rem; */
}

.chassis_list {
  font-size: 0.24rem;
  color: #666;
}

.chassis_list > div {
  width: 32%;
  margin-top: 2%;
  margin-right: 2%;
}

.chassis .chassis_list > div:nth-of-type(3n) {
  margin-right: 0;
}

.chassis_list > div img {
  width: 100%;
  /* height: 1.7rem; */
}

/* 润滑 */

.maintain {
  padding-top: 0.2rem;
  font-size: 0.24rem;
  color: #666;
}

.maintain_l {
  /* margin-bottom: 0.2rem; */
}

.maintain_l img {
  height: 2.6rem;
  width: 48%;
}

.maintain_cont {
  padding: 0 0.2rem 0.2rem;
}

.maintain_r > div {
  width: 22%;
  padding-top: 3%;
  margin-right: 4%;
}

.maintain_r > div:nth-of-type(4n) {
  margin-right: 0;
}

.maintain_r img {
  width: 100%;
  height: 1.2rem;
}

/* 2s */

.maintains {
  padding-top: 0.2rem;
}

.maintains_ul {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #f4f4f4;
}

.maintains_ul > div {
  width: 30%;
}

.maintains_ul img {
  height: 2.1rem;
  width: 2.1rem;
}

.maintains_list img {
  width: 60%;
  height: 1.2rem;
  margin-right: 0.24rem;
}

.maintains_list > div {
  width: 50%;
  padding-right: 0.28rem;
  margin-top: 0.135rem;
  margin-bottom: 0.135rem;
}

.maintains_list > div:nth-of-type(2n) {
  padding-right: 0;
}

/* 最新资讯 */

.news_cont {
  padding: 0 0.2rem;
}

.news_li {
  border-bottom: 1px solid #e9e9e9;
  padding: 0.2rem 0;
}

.news_li:last-of-type {
  border-bottom: none;
}

.news_li img {
  min-width: 2.27rem;
  max-width: 2.27rem;
  height: 1.72rem;
  border-radius: 5px;
  object-fit: contain;
}

.news_li_s {
  margin-top: 0.1rem;
  height: 0.42rem;
  line-height: 0.42rem;
}

.news_li_tip {
  padding: 0 0.12rem;
  background: #f2f2f2;
  border-radius: 0.05rem;
}

.swiper img,
.hot img,
.engine img,
.chassis img,
.maintain img,
.maintains_list img,
.brandFrist_img img,
.news_ul img .engine_two img,
.brandFrist_imgList img {
  border-radius: 0.08rem;
}

.padding-t20 {
  padding-top: 0.2rem;
}

.w-100p {
  width: 100%;
}
.colSwiper {
  margin: 10px 0.2rem 0;
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 0 20px;
  font-size: 0.24rem;
  background: white;
}

.colSwiper img {
  width: 70px;
  margin-right: 10px;
}

.colSwiper .van-swipe-item {
  line-height: 40px;
}
.hot_title img {
  width: 16px;
  object-fit: contain;
}
</style>